<template>
  <div class="app-container">
    <div class="content-content">
      <el-row>
        <h1>资源管理</h1>
      </el-row>
      <el-row>
        <div class="appTable">
          <el-col :span="12">
            <div class="search">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item style="width: 250px">
                  <el-input
                    size="medium"
                    v-model="formInline.keyWord"
                    placeholder="可输入资源名称或显示名称关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="medium" @click="tableList"
                    >查 询</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="add">
              <el-button type="primary" size="medium" @click="addBtn"
                >添 加</el-button
              >
            </div>
          </el-col>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column prop="name" label="资源名称"> </el-table-column>
            <el-table-column prop="displayName" label="显示名称">
            </el-table-column>
            <el-table-column prop="uri" label="资源地址"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="editBtn(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :page-size="perPage"
            :current-page="page"
            :total="total"
            @current-change="changePage"
            style="margin-top: 15px; text-align: right"
            background
            layout="prev, pager, next"
          ></el-pagination>

          <el-dialog
            title="创建资源"
            :visible.sync="dialogFormVisible"
            v-if="dialogFormVisible"
            width="30%"
          >
            <el-form :model="form" :rules="rules" ref="form">
              <el-form-item
                label="资源名称"
                :label-width="formLabelWidth"
                prop="name"
              >
                <el-input v-model="form.name" autocomplete="off" style="width:70%"></el-input>
              </el-form-item>
              <el-form-item label="显示用的名称" :label-width="formLabelWidth">
                <el-input
                  v-model="form.displayName"
                  autocomplete="off"
                  style="width:70%"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="资源地址"
                :label-width="formLabelWidth"
                prop="uri"
              >
                <el-input v-model="form.uri" autocomplete="off" style="width:70%"></el-input>
              </el-form-item>

              <el-form-item
                label="访问方法"
                prop="method"
                ref="method"
                :label-width="formLabelWidth"
              >
              <div>
                <el-select
                  v-model="form.method"
                  slot="prepend"
                  placeholder="请输入方法"
                  filterable
                  allow-create
                  default-first-option
                  style="width:70%"
                >
                <el-option
                    v-for="(item, index) in methodArr"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                </div>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="handleEdit('form')"
                v-if="flag == '编辑'"
                >编 辑</el-button
              >
              <el-button
                type="primary"
                @click="add('form')"
                v-if="flag == '确定'"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </el-row>
      <div class="back" @click="back">
        <i class="el-icon-back" style="font-size: 25px"></i>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/request";
export default {
  data() {
    return {
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      appKey: "fd5b5aabcf1c75f915241c8e",
      keyWord: "",
      formInline: {
        keyWord: "",
      },
      tableData: [],
      loading: true,
      form: {
        name: "",
        displayName: "",
        uri: "",
        method: "",
        trafficrouter: "",
      },
      edit: {
        id: "",
        appId: "",
      },
      methodArr: [
        { value: 0, label: "GET" },
        { value: 1, label: "POST" },
        { value: 2, label: "PUT" },
        { value: 3, label: "DELETE" },
      ],
      flag: "确定",
      formLabelWidth: "150px",
      dialogFormVisible: false,
      rules: {
        name: [
          { required: true, message: "请输入资源名称", trigger: "change" },
        ],
        uri: [{ required: true, message: "请输入资源地址", trigger: "change" }],
        method: [
          { required: true, message: "请选择访问方法", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.tableList();
  },
  methods: {
    //返回
    back() {
      this.$router.push({
        path: "/",
      });
    },
    //编辑
    editBtn(index, row) {
      // console.log(row);
      this.flag = "编辑";
      this.dialogFormVisible = true;
      this.edit.id = row.id;
      this.edit.appId = row.appId;
      this.form.name = row.name;
      this.form.displayName = row.displayName;
      this.form.description = row.description;
      this.form.uri = row.uri;
      this.form.method = row.method;
    },
    handleEdit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let data = {
            id: this.edit.id,
            uri: this.form.uri,
            name: this.form.name,
            displayName: this.form.displayName,
            method: this.form.method,
          };
          axios({
            url: `api/resource/${data.id}`,
            method: "PUT",
            data,
          })
            .then((res) => {
              // console.log(res);
              this.dialogFormVisible = false;
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              this.tableList();
            })
            .catch((err) => {});
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    handleDelete(index, row) {
      // console.log(row);
      let params = {
        id: row.id,
        appKey: this.appKey,
      };
      axios({
        url: `api/resource/${params.id}`,
        method: "delete",
        params,
      })
        .then((res) => {
          if (this.page != 1) {
            if ((this.total - 1) % this.perPage == 0) this.page--;
          }
          this.$message({
            message: "删除成功",
            type: "success",
          });

          this.tableList();
        })
        .catch((err) => {});
    },
    tableList() {
      this.loading=true
      this.$store
        .dispatch("resources/getResources", {
          appKey: this.appKey,
          keyWord: this.formInline.keyWord,
          pageSize: this.perPage,
          page: this.page,
        })
        .then((data) => {
          // console.log(data);
          this.loading = false;
          this.tableData = data.data.items;
          this.total = data.data.total;
        })
        .catch((err) => {});
    },
    // 翻页
    changePage(num) {
      this.page = num;
      this.tableList();
    },
    //添加按钮
    addBtn() {
      for (let data in this.form) {
        this.form[data] = "";
      }
      this.flag = "确定";
      this.dialogFormVisible = true;
    },
    add(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("resources/getAddResources", {
              appKey: this.appKey,
              name: this.form.name,
              displayName: this.form.displayName,
              uri: this.form.uri,
              method: this.form.method,
            })
            .then((data) => {
              // console.log(data);
              if (data.code == 200) {
                this.loading = true;
                this.dialogFormVisible = false;
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.tableList();
              }
            })
            .catch((err) => {});
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    // changeSelect(val) {
    //   // console.log(val);
    //   this.form.method = val;
    // },
    selectBlur(e) {
      console.log(111);
      console.log(e);
      if (e.target.value !== "") {
        this.form.method = e.target.value;
        this.$forceUpdate();
      }
    },
    selectClear() {
      this.form.method = "";
      this.$forceUpdate();
    },
    selectChange(val) {
      console.log(222);
      console.log(val);
      this.form.method = val;
      this.$forceUpdate();
    },
    selectFocus(val) {
      if (e.target.value !== "") {
        this.form.method = e.target.value;
        this.$forceUpdate();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  margin-bottom: 15px;
  text-align: right;
}
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-form--inline .el-form-item__content {
  width: 100%;
}
</style>